<template>
 <view class="pages">
	<view class="showLogo">这是logo</view>
	<view class="login">
		<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<image
				src="../../static/phone.png"
				mode="scaleToFill"
			/>
			<text >手机号快捷登录</text>
		</button>
	</view>
 </view>
</template>

<script setup lang='ts'>
import { onMounted,ref } from 'vue'
const code = ref('')
const sessionKey = ref('')
const openId = ref('')

const getPhoneNumber = ()=> {
	console.log('获取手机号');
}

onMounted(() => {
	// console.log('启动')
	uni.login({
		provider: 'weixin',
		success: (success) => {
			code.value = success.code, 
			uni.request({
				url: 'https://api.weixin.qq.com/sns/jscode2session', // 请求微信服务器
				method: 'GET',
				data: {
								appid: 'wx4a1ea46e6350fc69', //你的小程序的APPID
								secret: '874eccd982055dfa5c0d5571c44d6321', //你的小程序秘钥secret,  
								js_code: code.value,
								grant_type: 'authorization_code' //此处为固定值
				},
				success: (success) => {
					sessionKey.value = success.data.session_key
					openId.value = success.data.openid
				}
			})
		},
	})
})
</script>

<style lang='scss' scoped>
.pages{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	.showLogo{
		height: 150px;
		width: 150px;
		background-color: pink;
		margin-bottom: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login{
		
		image{
			width:20px ;
			height: 20px;

		}
		.button{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20vh;
			border-radius: 22.8px;
			width: 80vw;
			background-color: #e4b247;
			color: white;
		}
		
	}
}
</style>